<template>
    <div class="amap-box">
        <div id="amap_invoice" class="map" tabindex="0"></div>
        <div class="resite" v-on:click="resite">
            <img class="resite-pic" src="@/assets/img/performance/homePage/site.png" />
        </div>
    </div>
</template>
<script>
import {city} from '../constant.js'
let vm
let map
let PositionPicker
let loadMap = (site) => {
    let params = {
        zoom:16,
        // center: [113.930476,22.533013]
    }
    // if(site){
    //     // console.log(city)
    //     params.center = city.find(e => e.name == site).site
    // }
    if(site && map){
        map.panTo(city.find(e => e.name == site).site)
        return
    }
    // if(site && map){
    //     map.setCity(`${site}`, (e) => {
    //         console.log(e)
    //     })
    //     return
    // }
    map = new AMap.Map('amap_invoice', params)
    var positionPicker = new PositionPicker({
        mode:'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
        map: map,
        iconStyle: { //自定义外观
            url: 'https://webapi.amap.com/ui/1.0/assets/position-picker2.png',
            ancher: [24, 40],
            size: [48, 48]
        }
    })
    // 成功获取信息
    positionPicker.on('success', function(positionResult) {
        // console.log(vm)
        vm.cb(positionResult)
        // console.log(position, address, nearestJunction, nearestRoad, nearestPOI)
    })        
    // 海上或海外无法获得地址信息
    positionPicker.on('fail', function(positionResult) {
        console.log('fail')
    })
    // 开启定位
    positionPicker.start()
    map.getCity(e => {
        // console.log(e)
        vm.getCityCallback && vm.getCityCallback(e)
    })
}
window.map_callback = () => {
    // console.log('map_callback')
    initAMapUI()
    //加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
    AMapUI.loadUI(['misc/PositionPicker'], function(_PositionPicker) {
        PositionPicker = _PositionPicker
        loadMap()    
    })
}
import { scrypt } from 'crypto';
export default {
    props: ['site', 'cb', 'getCityCallback'],
    watch: {
        site(val){
            this.site = val
            // console.log(val)
            loadMap(val)
        },
        cb(v){this.cb = v},
        getCityCallback(v){this.getCityCallback = v}
    },
    data(){
        return{
            key: '72e3718b3131b98df66cf773f490f10c'
        }
    },
    created(){
        vm = this
        if(window.scriptID){
            console.log('amp已加载成功')
            return
        }
			var scriptID = 'map_amp_ID'
			var amapUIJs = document.createElement('script')
			amapUIJs.src = 'https://webapi.amap.com/ui/1.0/main-async.js'
			document.body.appendChild(amapUIJs)
			amapUIJs.onload = () => {
				var scriptUrl = `https://webapi.amap.com/maps?v=1.4.13&key=${this.key}&callback=map_callback`
				var script = document.createElement('script')
				script.id = scriptID
				script.src = scriptUrl
				document.body.appendChild(script)
			}
			window.scriptID = scriptID
    },
    methods: {
        resite(){
            loadMap()
        }
    },
    destroyed(){
        map.destroy()
    }
}
</script>

<style lang="scss" scoped>
.amap-box{
    height: calc(100vh - .9rem);
    // background-color: #000;
    overflow: hidden;
    #amap_invoice{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: calc(140vh);
    }
    .resite{
        position: fixed;
        bottom: 1.88rem;
        left: .12rem;
        z-index: 3;
        .resite-pic{
            width: 1.04rem;
            height: 1.04rem;
        }
    }
}
</style>
